<template>
	<img class="bgImg" :src="musicList.al.picUrl">
	<div class="detailTop">
		<div class="detailTopLeft">
			<svg @click="backhome" class="icon liebiao" aria-hidden="true">
				<use xlink:href="#icon-zuojiantou"></use>
			</svg>
			<div class="leftMarquee">
				<p>{{musicList.name}}</p>
				<span v-for="item in musicList.ar" :key="item">
					{{item.name + ' '}}
				</span>
				<svg class="icon liebiao" aria-hidden="true">
					<use xlink:href="#icon-youjiantou1"></use>
				</svg>
			</div>
		</div>
		<div class="detailTopRight">
			<svg class="icon liebiao" aria-hidden="true">
				<use xlink:href="#icon-fenxiang"></use>
			</svg>
		</div>
	</div>

	<div class="detailContent" v-show="!isLyricShow">
		<img :class="{ img_needle_active: !isbtnShow }" class="img_needle" src="@/assets/needle-ab.png">
		<img class="img_cd" src="@/assets/cd.png">
		<img @click="isLyricShow=true" :class="{ img_ar_active: !isbtnShow, img_ar_pauesd: isbtnShow }" class="img_ar"
			:src="musicList.al.picUrl">
	</div>
	<div @click="isLyricShow = false" v-show="isLyricShow" ref="musicLyric" class="musicLyric">
		<p :class="{active: (currentTime * 1000) >= item.time && (currentTime * 1000) <=  item.pre}"
			v-for="item in lyric" :key="item">
			{{item.lrc}}
		</p>
	</div>
	<div class="detailFooter">
		<div class="footerTop">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-aixin"></use>
			</svg>
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-iconfontzhizuobiaozhun023146"></use>
			</svg>
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-yinlechangpian"></use>
			</svg>
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-iconfontzhizuobiaozhun023110"></use>
			</svg>
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-liebiao-"></use>
			</svg>
		</div>
		<div class="footContent">
			<input step="0.05" v-model="currentTime" min="0" :max="duration" class="range" type="range" />
		</div>
		<div class="footer">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-xunhuan"></use>
			</svg>
			<svg @click="goPlay(-1)" class="icon" aria-hidden="true">
				<use xlink:href="#icon-shangyishoushangyige"></use>
			</svg>
			<svg class="icon bofang" aria-hidden="true" v-if="isbtnShow" @click="play">
				<use xlink:href="#icon-bofang1"></use>
			</svg>
			<svg class="icon bofang" aria-hidden="true" v-else @click="play">
				<use xlink:href="#icon-zanting"></use>
			</svg>
			<svg @click="goPlay(1)" class="icon" aria-hidden="true">
				<use xlink:href="#icon-xiayigexiayishou"></use>
			</svg>
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-zu"></use>
			</svg>
		</div>
	</div>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'

	export default {
		props: {
			musicList: {
				type: Object,
				default: () => {}
			},

			play: {
				type: Function
			},

			addDuration: {
				type: Function
			}
		},

		data() {
			return {
				isLyricShow: false,
			}
		},

		mounted() {
			this.addDuration()
		},

		watch: {
			currentTime(newVal) {
				let p = document.querySelector("p.active")
				if (p && p.offsetTop > 300) {
					this.$refs.musicLyric.scrollTop = p.offsetTop - 300
				}

				if (newVal === this.duration) {
					if (this.playListIndex === this.playList.length - 1) {
						this.updatePlayListIndex(0)
					}
					this.updatePlayListIndex(this.playListIndex + 1)
				}
			}
		},

		computed: {
			...mapState(["isbtnShow", "lyricList", "currentTime", "playListIndex", "playList", "duration"]),

			lyric() {
				let arr
				if (this.lyricList.lyric) {
					arr = this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item, i) => {
						let min = item.slice(1, 3)
						let sec = item.slice(4, 6)
						let mill = item.slice(7, 10)
						let lrc = item.slice(11, item.length + 1)
						let time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);

						if (isNaN(Number(mill))) {
							mill = item.slice(7, 9)
							lrc = item.slice(10, item.length + 1)
						}
						return {
							min,
							sec,
							mill,
							lrc,
							time
						}
					})

					arr.forEach((item, i) => {
						if (i === arr.length - 1 || isNaN(arr[i + 1].time)) {
							item.pre = 100000
						} else {
							item.pre = arr[i + 1].time
						}
					})
				}
				return arr
			},
		},

		methods: {
			...mapMutations(['updateDetailShow', 'updatePlayListIndex']),

			backhome() {
				this.updateDetailShow()
				this.isLyricShow = false
			},

			goPlay(num) {
				let index = this.playListIndex + num

				if (index < 0) {
					index = this.playList.length - 1
				} else if (index > (this.playList.length - 1)) {
					index = 0
				}
				this.updatePlayListIndex(index)
			}
		}
	}
</script>

<style lang="less" scoped>
	.bgImg {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
		filter: blur(70px);
	}

	.detailTop {
		width: 100%;
		height: 1rem;
		display: flex;
		padding: 0.3rem;
		justify-content: space-between;
		align-items: center;
		fill: #fff;

		.detailTopLeft {
			display: flex;
			align-items: center;

			.leftMarquee {
				width: 90%;
				height: 100%;
				margin-left: 0.4rem;

				p {
					color: #fff;
				}

				span {
					color: #fff;
				}

				.icon {
					display: inline-block;
					vertical-align: middle;
					width: 0.3rem;
					height: 0.3rem;
					fill: #fff;
				}
			}
		}
	}

	.detailContent {
		width: 100%;
		height: 9rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		.img_needle {
			width: 2rem;
			height: 3rem;
			position: absolute;
			left: 46%;
			transform-origin: 0 0;
			transform: rotate(-13deg);
			transition: all 2s;
		}

		.img_needle_active {
			width: 2rem;
			height: 3rem;
			position: absolute;
			left: 46%;
			transform-origin: 0 0;
			transform: rotate(0deg);
			transition: all 2s;
		}

		.img_cd {
			width: 5rem;
			height: 5rem;
			position: absolute;
			bottom: 2.3rem;
			z-index: -1;
		}

		.img_ar {
			width: 3.2rem;
			height: 3.2rem;
			border-radius: 50%;
			position: absolute;
			bottom: 3.14rem;
			animation: rotate_ar 10s linear infinite;
		}

		.img_ar_active {
			animation-play-state: running;
		}

		.img_ar_pauesd {
			animation-play-state: paused;
		}

		@keyframes rotate_ar {
			0% {
				transform: rotateZ(0deg);
			}

			100% {
				transform: rotateZ(360deg);
			}
		}
	}

	.musicLyric {
		width: 100%;
		height: 7.5rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 0.2rem;
		overflow: scroll;

		p {
			color: rgb(190, 181, 181);
			margin-bottom: 0.3rem;
		}

		.active {
			color: #fff;
			font-size: 0.5rem;
		}
	}

	.detailFooter {
		width: 100%;
		height: 3rem;
		position: absolute;
		bottom: 0.2rem;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.footerTop {
			width: 100%;
			height: 1rem;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.icon {
				width: 0.36rem;
				height: 0.36rem;
				fill: rgb(245, 234, 234);
			}

			.icon {
				width: 0.6rem;
				height: 0.6rem;
			}
		}

		.range {
			width: 100%;
			height: 0.06rem;
		}

		.footer {
			width: 100%;
			height: 1rem;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.icon {
				fill: rgb(245, 234, 234);
			}

			.bofang {
				width: 1rem;
				height: 1rem;
			}
		}
	}
</style>
